<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>本次作业所用知识（超详细电子书版）</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: '微软雅黑', Arial, sans-serif; background: #f8f8f8; margin: 0; padding: 0; }
        .container { max-width: 980px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 36px; }
        h1 { text-align: center; color: #2c3e50; margin-bottom: 10px; }
        h2 { color: #34495e; margin-top: 32px; }
        h3 { color: #2980b9; margin-top: 24px; }
        pre { background: #f4f4f4; border-radius: 4px; padding: 12px; font-size: 16px; overflow-x: auto; }
        .explain { margin-bottom: 18px; font-size: 17px; }
        .tag { display: inline-block; background: #e3eafc; color: #2980b9; border-radius: 3px; padding: 2px 8px; font-size: 14px; margin-right: 8px; }
        .attr { color: #8e44ad; font-weight: bold; }
        .param { color: #16a085; font-weight: bold; }
        .func { color: #d35400; font-weight: bold; }
        .block { margin-bottom: 32px; }
        .code-title { font-weight: bold; color: #2d6a4f; margin-bottom: 4px; font-size: 17px; }
        ul { margin: 8px 0 8px 24px; }
        li { margin-bottom: 4px; font-size: 15px; }
        .section-title { font-size: 22px; color: #1a237e; margin-top: 36px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; }
        .func-title { font-size: 18px; color: #d35400; margin-top: 18px; margin-bottom: 6px; }
        .func-block { background: #f9f6f2; border-left: 4px solid #d35400; padding: 10px 16px; margin-bottom: 22px; }
        .word-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
        .word-table th, .word-table td { border: 1px solid #e0e0e0; padding: 6px 12px; font-size: 15px; }
        .word-table th { background: #e3eafc; color: #2980b9; }
        .word-table td { background: #f8f8f8; }
        .step { background: #fffbe6; border-left: 4px solid #f7b731; padding: 10px 18px; margin-bottom: 18px; font-size: 16px; }
    </style>
</head>
<body>
<div class="container">
    <h1>本次作业所用知识（超详细电子书版）</h1>
    <div class="explain">本电子书详细拆解了网页作业的全部代码、标签、属性、参数、功能实现思路和 JS 交互逻辑，并汇总所有英文单词及中文解释，适合零基础用户逐行查阅和学习。哪怕是老奶奶也能看懂、能做出来一样的效果。</div>
    <h2 class="section-title">一、常用英文单词及中文解释</h2>
    <table class="word-table">
        <tr><th>英文单词</th><th>中文意思</th></tr>
        <tr><td>html</td><td>超文本标记语言</td></tr>
        <tr><td>head</td><td>头部</td></tr>
        <tr><td>body</td><td>主体</td></tr>
        <tr><td>title</td><td>标题</td></tr>
        <tr><td>meta</td><td>元数据</td></tr>
        <tr><td>charset</td><td>字符集</td></tr>
        <tr><td>viewport</td><td>视口</td></tr>
        <tr><td>width</td><td>宽度</td></tr>
        <tr><td>device</td><td>设备</td></tr>
        <tr><td>initial</td><td>初始</td></tr>
        <tr><td>scale</td><td>缩放</td></tr>
        <tr><td>user-scalable</td><td>用户可缩放</td></tr>
        <tr><td>maximum</td><td>最大</td></tr>
        <tr><td>minimum</td><td>最小</td></tr>
        <tr><td>align</td><td>对齐</td></tr>
        <tr><td>center</td><td>居中</td></tr>
        <tr><td>style</td><td>样式</td></tr>
        <tr><td>font-size</td><td>字体大小</td></tr>
        <tr><td>color</td><td>颜色</td></tr>
        <tr><td>hr</td><td>水平线</td></tr>
        <tr><td>p</td><td>段落</td></tr>
        <tr><td>a</td><td>超链接</td></tr>
        <tr><td>href</td><td>链接地址</td></tr>
        <tr><td>target</td><td>目标窗口</td></tr>
        <tr><td>blank</td><td>空白（新窗口）</td></tr>
        <tr><td>div</td><td>区块容器</td></tr>
        <tr><td>display</td><td>显示方式</td></tr>
        <tr><td>flex</td><td>弹性布局</td></tr>
        <tr><td>align-items</td><td>项目对齐方式</td></tr>
        <tr><td>img</td><td>图片</td></tr>
        <tr><td>src</td><td>图片路径</td></tr>
        <tr><td>margin</td><td>外边距</td></tr>
        <tr><td>right</td><td>右边</td></tr>
        <tr><td>left</td><td>左边</td></tr>
        <tr><td>top</td><td>顶部</td></tr>
        <tr><td>bottom</td><td>底部</td></tr>
        <tr><td>strong</td><td>加粗</td></tr>
        <tr><td>br</td><td>换行</td></tr>
        <tr><td>span</td><td>内联容器</td></tr>
        <tr><td>position</td><td>定位</td></tr>
        <tr><td>relative</td><td>相对定位</td></tr>
        <tr><td>absolute</td><td>绝对定位</td></tr>
        <tr><td>block</td><td>块级</td></tr>
        <tr><td>inline</td><td>行内</td></tr>
        <tr><td>inline-block</td><td>行内块</td></tr>
        <tr><td>button</td><td>按钮</td></tr>
        <tr><td>onclick</td><td>点击事件</td></tr>
        <tr><td>script</td><td>脚本</td></tr>
        <tr><td>function</td><td>函数</td></tr>
        <tr><td>var</td><td>变量</td></tr>
        <tr><td>getElementById</td><td>通过ID获取元素</td></tr>
        <tr><td>innerText</td><td>内部文本</td></tr>
        <tr><td>window</td><td>窗口对象</td></tr>
        <tr><td>current</td><td>当前</td></tr>
        <tr><td>alert</td><td>弹窗提示</td></tr>
        <tr><td>setTimeout</td><td>定时器</td></tr>
        <tr><td>true/false</td><td>真/假</td></tr>
        <tr><td>if/else</td><td>如果/否则</td></tr>
        <tr><td>encodeURIComponent</td><td>编码为URL组件</td></tr>
        <tr><td>plus</td><td>加号（+1）</td></tr>
        <tr><td>id</td><td>唯一标识</td></tr>
        <tr><td>dataset</td><td>自定义数据集</td></tr>
        <tr><td>clicked</td><td>已点击</td></tr>
        <tr><td>qq</td><td>QQ</td></tr>
        <tr><td>wechat</td><td>微信</td></tr>
        <tr><td>qr</td><td>二维码</td></tr>
        <tr><td>save</td><td>保存</td></tr>
        <tr><td>show</td><td>显示</td></tr>
        <tr><td>hide</td><td>隐藏</td></tr>
        <tr><td>container</td><td>容器</td></tr>
        <tr><td>section</td><td>章节</td></tr>
        <tr><td>title</td><td>标题</td></tr>
        <tr><td>description</td><td>描述</td></tr>
        <tr><td>code</td><td>代码</td></tr>
        <tr><td>explanation</td><td>解释</td></tr>
        <tr><td>tag</td><td>标签</td></tr>
        <tr><td>attribute</td><td>属性</td></tr>
        <tr><td>param</td><td>参数</td></tr>
        <tr><td>func</td><td>函数</td></tr>
        <tr><td>block</td><td>代码块</td></tr>
        <tr><td>list</td><td>列表</td></tr>
        <tr><td>item</td><td>条目</td></tr>
        <tr><td>summary</td><td>总结</td></tr>
    </table>
    <h2 class="section-title">二、代码逐行详细解释与操作步骤</h2>
    <div class="step">1. 声明文档类型：<br><pre>&lt;!DOCTYPE html&gt;</pre>告诉浏览器这是HTML5网页，保证兼容性。</div>
    <div class="step">2. 网页结构开始：<br><pre>&lt;html lang="zh-CN"&gt;</pre>所有内容都写在这个标签里面，lang设置为中文。</div>
    <div class="step">3. 网页头部：<br><pre>&lt;head&gt;...&lt;/head&gt;</pre>这里放网页标题、编码、适配等信息。</div>
    <div class="step">4. 设置编码：<br><pre>&lt;meta charset="UTF-8"&gt;</pre>让网页能正常显示中文。</div>
    <div class="step">5. 移动端适配并禁止缩放：<br><pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"&gt;</pre>让网页在手机上自适应且不能缩放。</div>
    <div class="step">6. 网页标题：<br><pre>&lt;title&gt;汉中小吃&lt;/title&gt;</pre>浏览器标签栏显示的名字。</div>
    <div class="step">7. 网页主体开始：<br><pre>&lt;body&gt;</pre>所有可见内容都写在这里。</div>
    <div class="step">8. 大标题：<br><pre>&lt;h2 align="center" style="font-size:50px;"&gt;汉中美食大全&lt;/h2&gt;</pre>显示在页面最上方，居中且很大。</div>
    <div class="step">9. 分割线：<br><pre>&lt;hr width="100%" color="orange" size="4"&gt;</pre>让内容分隔更清楚。</div>
    <div class="step">10. 导航链接：<br><pre>&lt;p&gt;...&lt;a&gt;...&lt;/a&gt;...&lt;/p&gt;</pre>点击可以跳转到不同美食页面。</div>
    <div class="step">11. 美食内容容器：<br><pre>&lt;div style="display: flex; align-items: center;"&gt;...&lt;/div&gt;</pre>让图片和文字并排显示，页面更美观。</div>
    <div class="step">12. 美食图片：<br><pre>&lt;img src="images/3.jpg" style="width:300px; margin-right:20px;"&gt;</pre>显示美食照片，右边留空隙。</div>
    <div class="step">13. 美食介绍段落：<br><pre>&lt;p style="font-size:30px; margin:0;"&gt;...&lt;/p&gt;</pre>详细介绍美食内容。</div>
    <div class="step">14. 分享按钮：<br><pre>&lt;img src="images/share.jpg" style="width:20px; margin-left:10px; cursor:pointer;" onclick="showSharePopup('...')"&gt;</pre>点击弹出分享弹窗，可以分享到QQ或微信。</div>
    <div class="step">15. 点赞功能：<br><pre>&lt;span style="position:relative; display:inline-block;"&gt;...&lt;img src="images/zan.jpg" ...&gt;&lt;span id="zan1plus" ...&gt;+1&lt;/span&gt;&lt;/span&gt;</pre>鼠标悬停变色，点击显示+1，两秒后恢复。</div>
    <div class="step">16. 其它美食条目：<br>结构和上面一样，图片、介绍、分享、点赞功能都可以复制粘贴。</div>
    <div class="step">17. 分享弹窗容器：<br><pre>&lt;div id="sharePopup" style="..."&gt;...&lt;/div&gt;</pre>弹窗居中显示，包含分享网址、二维码和关闭按钮。</div>
    <div class="step">18. JavaScript交互逻辑：<br><pre>&lt;script&gt;...&lt;/script&gt;</pre>让网页有弹窗、二维码、点赞等交互效果。</div>
    <div class="step">19. 结束标签：<br><pre>&lt;/body&gt;&lt;/html&gt;</pre>网页内容结束。</div>
    <h2 class="section-title">三、JavaScript函数详细解释</h2>
    <div class="func-block">
        <div class="func-title">1. 显示分享弹窗</div>
        <pre>function showSharePopup(url) {
    document.getElementById('sharePopup').style.display = 'block'; // 显示弹窗
    document.getElementById('shareUrl').innerText = url; // 设置分享网址
    window.currentShareUrl = url; // 保存当前网址
}</pre>
        <ul>
            <li>让弹窗显示出来。</li>
            <li>把要分享的网址写到弹窗里。</li>
            <li>保存网址，方便后续生成二维码。</li>
        </ul>
    </div>
    <div class="func-block">
        <div class="func-title">2. 关闭分享弹窗</div>
        <pre>function closeSharePopup() {
    document.getElementById('sharePopup').style.display = 'none'; // 隐藏弹窗
}</pre>
        <ul><li>让弹窗消失，用户点击关闭按钮后执行。</li></ul>
    </div>
    <div class="func-block">
        <div class="func-title">3. 生成QQ分享二维码</div>
        <pre>function shareToQQ() {
    var url = window.currentShareUrl || '';
    var qr = document.getElementById('wechatQr');
    qr.src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=' + encodeURIComponent(url);
    qr.style.display = 'block';
    alert('请用QQ扫一扫下方二维码分享：');
}</pre>
        <ul>
            <li>获取当前分享网址。</li>
            <li>用第三方接口生成二维码图片，内容就是网址。</li>
            <li>显示二维码图片。</li>
            <li>弹窗提示用户用QQ扫码。</li>
        </ul>
    </div>
    <div class="func-block">
        <div class="func-title">4. 生成微信分享二维码</div>
        <pre>function shareToWeChat() {
    var url = window.currentShareUrl || '';
    var qr = document.getElementById('wechatQr');
    qr.src = 'https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=' + encodeURIComponent(url);
    qr.style.display = 'block';
    alert('请用微信扫一扫下方二维码分享：');
}</pre>
        <ul>
            <li>获取当前分享网址。</li>
            <li>用第三方接口生成二维码图片，内容就是网址。</li>
            <li>显示二维码图片。</li>
            <li>弹窗提示用户用微信扫码。</li>
        </ul>
    </div>
    <div class="func-block">
        <div class="func-title">5. 点赞交互逻辑</div>
        <pre>function zanHover(img) {
    if (!img.dataset.clicked) {
        img.src = 'images/zan1.jpg'; // 鼠标悬停时切换图片
    }
}
function zanOut(img) {
    if (!img.dataset.clicked) {
        img.src = 'images/zan.jpg'; // 鼠标移开时恢复图片
    }
}
function zanClick(img) {
    var plus = document.getElementById(img.id + 'plus');
    if (!img.dataset.clicked || img.dataset.clicked === 'false') {
        img.src = 'images/zan1.jpg'; // 点击时切换图片
        img.dataset.clicked = 'true'; // 标记已点击
        if (plus) plus.style.display = 'inline'; // 显示+1
        setTimeout(function() {
            if (plus) plus.style.display = 'none'; // 2秒后隐藏+1
            img.src = 'images/zan.jpg'; // 恢复原图
            img.dataset.clicked = 'false'; // 取消点击标记
        }, 2000);
    } else {
        img.src = 'images/zan.jpg'; // 再次点击还原
        img.dataset.clicked = 'false';
        if (plus) plus.style.display = 'none';
    }
}</pre>
        <ul>
            <li>zanHover：鼠标悬停时切换为zan1.jpg。</li>
            <li>zanOut：鼠标移开时恢复为zan.jpg。</li>
            <li>zanClick：点击时切换图片并显示+1，两秒后恢复原状。再次点击还原。</li>
        </ul>
    </div>
    <h2 class="section-title">四、功能实现思路与操作流程</h2>
    <div class="step">1. 先写好网页结构（html、head、body等标签）。</div>
    <div class="step">2. 设置编码和适配，保证手机和电脑都能正常显示。</div>
    <div class="step">3. 用h2、hr、p、a等标签写好标题和导航。</div>
    <div class="step">4. 用div做容器，flex让图片和文字并排显示。</div>
    <div class="step">5. 用img标签插入美食图片、分享图标、点赞图标。</div>
    <div class="step">6. 用span做点赞容器，绝对定位让+1显示在图标右侧。</div>
    <div class="step">7. 用button做分享和关闭弹窗的按钮。</div>
    <div class="step">8. 用script写JS代码，实现弹窗、二维码、点赞等交互。</div>
    <div class="step">9. 每个标签、属性、参数都可以参考上面的英文单词表和解释，照着写就能做出来一样的效果。</div>
    <div class="step">10. 如果不会排版，可以复制粘贴结构，改图片和文字内容即可。</div>
</div>
</body>
</html>
